 /**
  * 加载页面时设置所有的可视化元素。
  */
 var ros;
 var viewer;
 var nav;
 var cloudScan;

 // Connect to ROS.

 ros = new ROSLIB.Ros({
     url: 'ws://localhost:9090/'
 });

 function init() {
     // Create the main viewer.
     viewer = new ROS2D.Viewer({
         divID: 'nav',
         width: document.body.clientWidth * 0.78,
         height: document.body.clientHeight * 0.98
             //  width: document.body.clientWidth * 0.75,
             //  height: document.body.clientHeight * 0.98,
     });

     //Setup the nav client.
     nav = NAV.OccupancyGridClientNav({
         ros: ros,
         rootObject: viewer.scene,
         viewer: viewer,
         serverName: '/move_base'

     });

     // show topics
     var showTopics = new SCAN.topicShowAll(ros, "show_all");

     // pointCloud Scan
     cloudScan = new SCAN.cloudScan({
         ros: ros,
         robotName: '/robot_pose',
         scanName: '/move_base/global_costmap/obstacle_layer/clearing_endpoints',
         scanType: 'sensor_msgs/PointCloud',
         isPointedCloud: true
     })


     ros.on('error', function(error) {
         document.querySelector('#rosStatus').className = ("error_state");
         document.querySelector('#rosStatus').innerText = "Error in the backend!";
         console.log("[Rosbridge connect] ERROR:", error);
     });

     // 找出我们什么时候发现的联系。
     ros.on('connection', function() {
         console.log('Connection made!');
         showTopics.update();
         viewer.scene.addChild(cloudScan.poindCloud);
         document.querySelector('#rosStatus').className = ("connected_state");
         document.querySelector('#rosStatus').innerText = " Connected.";
     });

     ros.on('close', function() {
         console.log('Connection closed.');
         document.querySelector('#rosStatus').className = ("");
         document.querySelector('#rosStatus').innerText = " Connection closed.";
     });

 }